<template>
  <div style="margin:20px;">
    <el-form ref="add_exam" :model="postForm" :rules="rules">
      <el-form-item style="margin-bottom: 10px;" prop="title">
        <el-input v-model="postForm.title" placeholder="请输入题干" />
      </el-form-item>
      <el-form-item style="margin-bottom: 10px;" prop="cateParent">
        <el-select v-model="postForm.cateParent" placeholder="请选择分类" @change="initSub()">
          <el-option v-for="(item,index) in categoryData" :key="index" :label="item.navName" :value="item.id" />
        </el-select>
        <el-select v-model="postForm.cateId" placeholder="请选择二级分类">
          <el-option v-for="(item,index) in subCategoryData" :key="index" :label="item.navName" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item style="margin-bottom: 10px;" prop="author">
        <el-input v-model="postForm.author" placeholder="请输入作者" />
      </el-form-item>
      <el-form-item style="margin-bottom: 10px;" prop="source">
        <el-input v-model="postForm.source" placeholder="请输入来源" />
      </el-form-item>
      <el-form-item prop="content" style="margin-bottom: 30px;">
        <Tinymce ref="editor" v-model="postForm.content" :height="400" />
      </el-form-item>
      <!--
      <el-form-item prop="image_uri" style="margin-bottom: 30px;">
        <Upload v-model="postForm.image_uri" />
      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" @click="submit()">提交</el-button>
        <el-button @click="resetForm()">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { createArticle, fetchArticle, updateArticle, getCategory } from '@/api/article'
// import MDinput from '@/components/MDinput'
import Tinymce from '@/components/Tinymce'
// import Upload from '@/components/Upload/SingleImage3'
export default {
  components: {
    // MDinput,
    Tinymce
    // Upload
  },
  data() {
    return {
      postForm: {
        id: '',
        title: '',
        content: '',
        image_uri: '',
        cateParent: '请选择',
        cateId: '请选择',
        author: '',
        source: ''
      },
      categoryData: [],
      subCategoryData: [],
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
          { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    const id = this.$route.query.id
    if (id !== '' && id !== undefined) {
      console.log(id)
      this.postForm.id = id
      this.getDetail()
    }
  },
  mounted() {
    this.getCategoryData()
  },
  methods: {
    getDetail() {
      fetchArticle(this.postForm.id).then(res => {
        this.postForm = res.data
      })
    },
    getCategoryData() {
      getCategory().then(res => {
        debugger
        this.categoryData = res.data
        this.postForm.cateParent = res.data[0].id
        this.subCategoryData = res.data[0]?.children
        // this.postForm.cateId = this.subCategoryData[0].id
        console.log(res)
      })
    },
    initSub() {
      console.log(this.postForm.cateParent)
      debugger
      this.subCategoryData = this.categoryData.find(x => x.id === this.postForm.cateParent)?.children
      this.postForm.cateId = '请选择'
    },
    submit() {
      if (this.postForm.id !== '') {
        this.update()
      } else {
        this.add()
      }
    },
    // 修改方法
    update() {
      this.$refs['add_exam'].validate(valid => {
        if (valid) {
          updateArticle(this.postForm.id, this.postForm).then(response => {
            console.log(response)
            if (response.code === 200) {
              this.$message('修改成功')
              this.$router.push('/exam/list')
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 添加方法
    add() {
      this.$refs['add_exam'].validate(valid => {
        if (valid) {
          const postFormAdd = {
            title: this.postForm.title,
            content: this.postForm.content,
            image_uri: this.postForm.image_uri,
            cateId: this.postForm.cateParent,
            author: this.postForm.author,
            source: this.postForm.source
          }

          createArticle(postFormAdd).then(response => {
            console.log(response)
            if (response.code === 200) {
              this.$message('添加成功')
              this.resetForm()
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm() {
      this.$refs['add_exam'].resetFields()
    }
  }
}
</script>
